<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-67-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-67-t.html">Full version</a>, <a href="basic-animate-elem-67-t.html">Basic version</a>, <a href="tiny-animate-elem-67-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="tiny-animate-elem-66-t.html">animate-elem-66-t ←</a> 
				<a href="tiny-index.html">index</a>
				<a href="tiny-animate-elem-68-t.html">→ animate-elem-68-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-67-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=80 height=60>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-67-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=80 height=60 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-67-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-67-t" src="../png/tiny-animate-elem-67-t.png" width="80" height="60"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
            <p>
                This tests performs basic tests on restart attribute
            </p>
            <p>
                Each row in the test shows different rectangles subject to &lt;set&gt;
                animations with different configurations with regards to the restart
                attribute. For each row, the animation should be active
                during the first 5 seconds of the animations where the red rectangle
                should show in the right column. At five seconds into the animation,
                all the rectangles should move to their left position.
            </p>
            <p>
                On the first row, the &lt;set&gt; animation has a begin attribute set to
                '0s;1s' and a dur attribute set to 4s. This should result in a first 
                interval of (0s &lt;= t &lt; 4s) which should be superceeded, at 1s, by a new interval
                of (1s &lt;= t &lt; 5s) because the default restart behavior is 'always'.
                Consequently, the rectangle should be in the right position during the 
                (0s &lt;= t &lt; 5s) interval and move to the left position at 5s.
            </p>
            <p>
                On the second row, the &lt;set&gt; animation has a begin attribute set to
                '0s;1s', a dur attribute set to 4s and a restart attribute set to always.
                The behavior should be the same as for the first row.
            </p>
            <p>
                On the third row, the first (left most) rectangle's &lt;set&gt; animation 
                has a begin attribute set to '0s;1s', a dur set to 5s and a restart attribute 
                set to whenNotActive. Because of the rules for computing intervals, the 
                animation's interval is (0s &lt;= t &lt; 5s) and is not superseded by a (1s &lt;= t &lt; 6s) interval
                because of the restart value.

                The second (right most) red rectangle's &lt;set&gt; animation has a begin
                attribute set to '0s;2.5s' and a dur attribute set to 2.5s. This results in 
                a first interval (0s &lt;= t &lt; 2.5s) which is followed by a (2.5s &lt;= t &lt; 5s) interval. Consequently,
                the rectangle stays on its right position for the first five seconds before it definitively
                moves to the left position.
            </p>
            <p>
                On the fourth row, the &lt;set&gt; animation has a begin attribute set to
                '0s;5s' and a dur attribute set to 5s. This results in a first interval of (0s &lt;= t &lt; 5s).
                Because the restart attribute is set to 'never', the following possible interval,
                (5s &lt;= t &lt; 10s) does not apply and the animation is only active for the first 5 seconds.
            </p>
            <p>
                The fifth row shows a simple animated red rectangle which lasts for 5 seconds. It shows
                a reference of how the other animations should behave visually: all red rectangles should
                have the same horizontal position as the one on the reference row, at any time during the 
                animation.
            </p>

		</div>
<div class="linkbar"> <p>
				<a href="tiny-animate-elem-66-t.html">animate-elem-66-t ←</a>
				<a href="tiny-index.html">index</a>
				<a href="tiny-animate-elem-68-t.html">→ animate-elem-68-t</a>
						</p></div>
</body>
</html>
